<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

{% load i18n %}

<html>
  <head>
    <title>{% trans "File Browser" %}</title>

    <style type="text/css">
      @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css";
      table {
        width: 100%;
      }

      tr {
        cursor: pointer;
      }

      tr.row1 {
        background-color: #f5f5f5;
      }

      tr.row2 {
        background-color: #ffffff;
      }

      td {
        padding: 5px;
      }

      td.size {
        color: #4c4c4c;
        text-align: right;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
    djConfig="parseOnLoad:true,isDebug:false"></script>
    <script type="text/javascript">
      dojo.require("dijit.Menu");

      function SelectFile(fileUrl)
      {
        window.opener.CKEDITOR.tools.callFunction({{ funcNum }}, fileUrl);
        window.close();
      }

    var fileMenu;
    var fileUrl;
    dojo.addOnLoad(function() {
      fileMenu = new dijit.Menu({
        targetNodeIds: [{% for file in files %}
                          {% if not file.url and file.is_image %}"file_{{ file.key.id }}",{% endif %}
                        {% endfor %}]
      });

      dojo.forEach(fileMenu.targetNodeIds, function(item) {
        var domNode = dojo.byId(item);
        dojo.connect(domNode, 'oncontextmenu', function(evt) {
          fn = dojo.getNodeProp(evt.target.parentNode, "onClick");
          fileURL = fn.match(/^SelectFile\(\'(.+)\'\);$/)[1];
        });
      });

      var thumbSubMenu = new dijit.Menu();
      thumbSubMenu.addChild(new dijit.MenuItem({
        label: "{% trans "Small" %}",
        onClick: function() {
          SelectFile(fileURL+'?size={{ configuration.THUMBNAIL_SIZES.0 }}')
        }
      }));
      thumbSubMenu.addChild(new dijit.MenuItem({
        label: "{% trans "Medium" %}",
        onClick: function() {
          SelectFile(fileURL+'?size={{ configuration.THUMBNAIL_SIZES.1 }}')
        }
      }));
      thumbSubMenu.addChild(new dijit.MenuItem({
        label: "{% trans "Large" %}",
        onClick: function() {
          SelectFile(fileURL+'?size={{ configuration.THUMBNAIL_SIZES.2 }}')
        }
      }));
      fileMenu.addChild(new dijit.PopupMenuItem({
        label: "{% trans "Thumbnail" %}",
        popup: thumbSubMenu
      }));

      var cropSubMenu = new dijit.Menu();
      cropSubMenu.addChild(new dijit.MenuItem({
        label: "{% trans "Small" %}",
        onClick: function() {
          SelectFile(fileURL+'?crop={{ configuration.CROP_SIZES.0 }}')
        }
      }));
      cropSubMenu.addChild(new dijit.MenuItem({
        label: "{% trans "Medium" %}",
        onClick: function() {
          SelectFile(fileURL+'?crop={{ configuration.CROP_SIZES.1 }}')
        }
      }));
      cropSubMenu.addChild(new dijit.MenuItem({
        label: "{% trans "Large" %}",
        onClick: function() {
          SelectFile(fileURL+'?crop={{ configuration.CROP_SIZES.2 }}')
        }
      }));
      fileMenu.addChild(new dijit.PopupMenuItem({
        label: "{% trans "Crop" %}",
        popup: cropSubMenu
      }));

      fileMenu.startup();
    });
    </script>
  </head>

<body class="tundra">
  <table>
    {% for file in files %}
      {% url views.main.get_url file.path as file_path %}
        <tr id="file_{{ file.key.id }}" class="{% cycle 'row1' 'row2' %}" onclick="SelectFile('{% firstof file_path file.url%}');">
          <td style="background-image: url({{ file.icon }}); background-repeat:no-repeat; background-position: 4px center; text-indent: 20px;">{{ file.name }}</td>
          <td class="size"><i>{{ file.size|filesizeformat }}</i></td>
        </tr>
    {% endfor %}
  </table>

  <script type="text/javascript">
    dojo.addOnLoad(function() {
      if (document.pub) {
        document.pub();
      }
    });
  </script>

</body>
</html>
